<template>
	<view class="flow-box">
		<view class="mt-70">
			<title title="报名流程" :showLine='true' :lineShow='true'></title>
		</view>
		<view class="attention-text">
			注：本课程仅对会员开放，如未通过会员认证，请先前往认证。否则无法开通课程
		</view>
		<view class="flow-list">
			<view class="item">
				<image class="item-icon" :src="'../../../../static/imgs/huiyuanshenqing.png'" mode=""></image>
				<view class="right">
					<view class="title-text">
						会员认证
					</view>
					<view class="content-text">
						{{course.memberText}}
					</view>
				</view>
			</view>
			<view class="item">
				<image class="item-icon" :src="'../../../../static/imgs/zhuanzhang.png'" mode=""></image>
				<view class="right">
					<view class="title-text">
						转账至协会账户
					</view>
					<view class="content-text">
						{{course.accountText}}
					</view>
				</view>
			</view>
			<view class="item">
				<image class="item-icon" :src="'../../../../static/imgs/shangchuan.png'" mode=""></image>
				<view class="right">
					<view class="title-text">
						上传资料
					</view>
					<view class="content-text">
						{{ course.uploadText }}
					</view>
				</view>
			</view>
			<view class="item">
				<image class="item-icon" :src="'../../../../static/menuIcon/zaixianpeixun.png'" mode=""></image>
				<view class="right">
					<view class="title-text">
						开通课程
					</view>
					<view class="content-text">
						{{ course.openText }}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import title from '@/components/bs-title/bs-title.vue'
	export default {
		components: {
			title
		},
		props: {
			course: {
				type: Object,
				default: () => {}
			}
		},
		data() {
			return {
				imgUrl: this.configImgUrl,
			};
		}
	}
</script>

<style lang="scss" scoped>
	.flow-box {
		.flow-list {
			.item {
				@include my-flex($fw: nowrap);
				margin-bottom: 60rpx;

				.item-icon {
					min-width: 80rpx;
					min-height: 80rpx;
					width: 80rpx;
					height: 80rpx;
					margin-right: 24rpx;
				}

				.title-text {
					margin-bottom: 6rpx;
				}
			}
		}

		.attention-text {
			color: #D71A1A;
			font-size: 26rpx;
			margin: 30rpx 0 50rpx 0;
		}
	}
</style>
